<template>
  <!-- 安全问题分类维护 -->
  <base-breadcrumb :title="$route.meta.title">
    <searchData :searchData="searchArr" @search="search"></searchData>
    <a-card :bordered="false">
      <!-- <title-name :title="$route.meta.title"></title-name> -->
      <a-row :gutter="10" class="page-height">
        <a-col :span="4" style="border-right: 1px solid #d9d9d9">
          <!-- 树搜索 -->
          <tree-search
            ref="treeSearch"
            :showButton="true"
            :api="api"
            emptyDescription="暂无安全隐患信息"
            isAll
            @loader="search"
            :autoSelect="false"
            :addDisable="loading"
            :selectedKeys.sync="selectedKeys"
            :selectOptions.sync="selectOptions"
          />
        </a-col>
        <a-col :span="20">
          <div class="mb12">
            <a-button type="primary" :disabled="hasChildren" @click="handleManage(0)" icon="plus"
            v-if="hideBuquBtn()"
              >添加安全隐患</a-button
            >
          </div>
          <!-- 表格 -->
          <list-table
            ref="table"
            tableLayout="fixed"
            size="default"
            :rowKey="(record) => record.id"
            :columns="columns"
            :request="loadData"
            :isScrollX="false"
            :alert="true"
            show-size-changer
            show-quick-jumper
            showPagination="auto"
          >
            <!-- 表格行操作栏 -->
            <span slot="action" slot-scope="text, record">
              <MoreButton>
                <a @click="handleManage(2, record)">查看</a>
                <a-divider type="vertical"   v-if="hideBuquBtn()"/>
                <a @click="handleManage(1, record)" v-if="hideBuquBtn()">编辑</a>
                <a-divider type="vertical"  v-if="hideBuquBtn()"/>
                <a v-if="record.status == 0 && hideBuquBtn()" @click="handleRemove(record)">启用</a>
                <a v-if="record.status !== 0 && hideBuquBtn()" class="del_btn" @click="handleRemove(record)" >停用</a>
              </MoreButton>
            </span>
          </list-table>
        </a-col>
      </a-row>
    </a-card>
    <!-- 问题分类表单弹窗 -->
    <dialog-problem
      ref="dialogProblem"
      :visible.sync="visible"
      :editModel="editModel"
      :form="form"
      :headerTitle="headerTitle"
      @confirm="submitForm"
    ></dialog-problem>
  </base-breadcrumb>
</template>

<script>
import dialogProblem from '@/views/quality/safe/safeInspection/dangerListMaintenance/dialogDanger.vue' // 安全隐患表单弹窗
import { STable } from '@/components' // 表格
import { risksList, subItem } from '@/api/quality/safe' // 问题维护api
import TreeSearch from '@/components/businessComponents/TreeSearch' // 树

const searchArr = [
  // 搜索框
  {
    name: '安全隐患描述',
    value: 'securityRisksName',
    type: 'input',
  },
]
const columns = [
  {
    title: '安全隐患描述',
    ellipsis: true,
    dataIndex: 'securityRisksName',
    width: 300,
  },
  // {
  //   title: '安全隐患描述',
  //   ellipsis:true,
  //   dataIndex: 'securityRisksDescription',
  // },
  {
    title: '整改期限（天）',
    dataIndex: 'periods',
    ellipsis: true,
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
    width: 180,
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+ Date.now(),
  components: {
    STable,
    dialogProblem,
    TreeSearch,
  },
  computed: {
    // 树节点api
    api() {
      return subItem
    },
    // 弹窗动态标题
    headerTitle() {
      return ['添加安全隐患', '编辑安全隐患', '查看安全隐患'][this.editModel]
    },
    // 表格列表请求参数
    args() {
      let args = this.queryParam
      // 添加分部分项id
      if (this.selectedKeys[0]) {
        args.subItemId = this.selectedKeys[0]
      }
      return args
    },
    hasChildren() {
      return (
        !this.selectOptions.parentId || this.selectedKeys.length < 1 || this.selectOptions.dataRef?.children?.length > 0
      )
    },
  },
  data() {
    this.columns = columns
    this.searchArr = searchArr
    return {
      // 操作类型：0 添加 1 编辑 3 查看
      editModel: 0,
      // 责任区域弹窗控件
      visible: false,
      selectedKeys: [], // 选中节点
      selectOptions: {},
      // 弹窗参数
      form: null,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        // if (!this.selectedKeys || this.selectedKeys.length === 0 || this.hasChildren) {
        //   this.loading = false
        //   return false
        // }
        const requestParameters = Object.assign({}, parameter, this.args)
        return risksList
          .getList(requestParameters)
          .then((res) => {
            if (res.data?.length === 0) {
              this.loading = false
            }
            return res
          })
          .catch((res) => {
            this.loading = false
          })
      },
      loading: false,
    }
  },
  mounted() {
    let that = this
    // 获取分项工程
    that.$refs.treeSearch.getList()
  },
  methods: {
    // 头部搜索
    search(value) {
      // 赋值表单
      if (value) {
        this.queryParam = value
      }
      this.loading = true
      this.$refs.table.refresh(true)
    },
    // 提交责任区域表单
    submitForm(e) {
      let that = this
      let name = ['create', 'update'][that.editModel] // 根据操作切换url地址
      risksList[name](e)
        .then((res) => {
          // if (res.code === 200 || res.data.code === 200) {
          that.$refs.dialogProblem.loading = false
          that.$message.success(['添加', '编辑'][that.editModel] + '成功！')
          that.visible = false
          that.$refs.table.loadData()
          // } else {
          //   that.$message.warning(['编辑', '添加'][that.editModel] + '失败！')
          // }
        })
        .catch((res) => {
          that.$refs.dialogProblem.loading = false
        })
    },
    // 移除区域
    handleRemove(e) {
      let that = this
      let status = ['启用', '停用'][e.status] || '操作'
      that.$confirm({
        title: '温馨提示',
        content: `确认${status}？`,
        okText: '提交',
        cancelText: '关闭',
        onOk() {
          return risksList.switchStatus({ id: e.id, status: e.status ? 1 : 0 }).then((res) => {
            // if (res.data.code == 200) {
            that.$message.success(status + '成功！')
            that.$refs.table.loadData()
            // } else {
            //   that.$message.warning(status + '失败！')
            // }
          })
        },
      })
    },
    // 业务区域：新增/编辑/查看
    handleManage(b, a) {
      // b 操作类型;a 行数据
      if (b) {
        this.form = a
      } else {
        // console.log(this.selectedKeys)
        // if (this.selectedKeys.length > 0) {
        this.selectOptions.subItemId = this.selectOptions.id
        this.selectOptions.subItemName = this.selectOptions.name
        this.form = this.selectOptions
        // } else {
        //   this.$message.warning('请先选择分项工程！')
        //   return
        // }
      }
      this.editModel = b
      // 添加
      this.visible = true // 打开弹窗
    },
  },
}
</script>

